<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	{
		// 1
		// let sex = 1;
		// root.render((
		// 	<div>
		// 		{sex===1?"男":"女"}
		// 	</div>
		// ))
	}
	{
		// 2
		// let bol = false;
		// && :当左侧为true,渲染右侧内容
		// && :当左侧为false,渲染左侧内容
		// || :与&&相反
		// root.render((
		// 	<div>
		// 		{bol && "你好"}
		// 	</div>
		// ));
	}
	{
		// 3- 如果条件比较多，函数
		function getStr(age=100){
			if(age>60) return "老年";
			if(age>30) return "中年";
			if(age>18) return "青年"
			if(age>12) return "少年"
			if(age>6) return "儿童";
			return "婴儿";
		}
		root.render((
			<div>
				{getStr(9)}
			</div>
		))
	}
</script>
</html>